<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>form</title>
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../plugin/jqueryValidation/jqueryvalidate.js"></script>
     <script type="text/javascript" src="../plugin/jqueryValidation/messages_zh.js"></script>
    <script src="../js/mui.js"></script>
    <script src="../js/mui.zoom.js"></script>
    <script src="../js/mui.previewimage.js"></script>
    <script src="../../script/api.js"></script>
    <style>
        * { touch-action: none; }
        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: calc(100% - 60px);
            position: absolute;
            top: 60px;
            margin: 0;
            padding: 0;
        }
        .mui-content .content_item{
            width: 100%;
            height: 100%;
        }
        .mui-btn-blue, .mui-btn-primary, input[type=submit]{
            width:100%;
            height:48px;
            line-height: 48px;
            background:#4F77AA ;
            border:none;
            padding: 0;
        }
        form .textarea {
            border: 1px solid #dddddd;
            float: right;
            margin-top: 10px;
        }
        .mui-input-group:after{
            background: #ffffff;
        }
        .clear{
            clear: both;
        }
        label.error{
                font-size: 14px;
                width: 100%;
                /*position: absolute;*/
                color: red;
        }
        
        .mui-input-group .mui-input-row{
            height: auto;
        }
        #avatar{
            width:100%;
            margin: 0;
            padding: 0;
        }
        #avatar li{
            width: 25%;
            height: 60px;
            float: left;
            list-style: none;
            padding: 0px 5px;
            box-sizing: border-box;
            margin-top: 10px;
        }
        #avatar li img{
            display:inline-block;
            width: 100%;
            height: 100%;
        }
        .mui-input-row .mui-btn{
            width:28%;
            float: left;
            margin-right: 15px;
            padding: 6px 15px;
            margin-top: 6px;
            background: #4F77AA;
            color: #ffffff;
        }

        /*预览图片样式*/
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            top: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        #avatar img {
            max-width: 100%;
            height: auto;
        }

         /*语音样式*/
            .mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{
                font-size: 20px;
                position: absolute;
                z-index: 1;
                right: 0;
                width: 38px;
                height: 55px;
                line-height: 55px;
                text-align: center;
                color: #999;
            }



            .blackBoxSpeak {
                width: 176px;
                height: 176px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
                url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

                background: rgba(0, 0, 0, .7);
                display: none;
                border-radius: 12px;
            }

            .blackBoxSpeakConent {
                font: 14.4px '微软雅黑 Light';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12px;
                display: block;
                text-align: center;
                width: 90%;
                padding: 8px 0;
                margin: auto;
                color: #ffffff;
                font-weight: 200;
                border-radius: 4px;
            }

            .blackBoxPause {
                width: 176px;
                height: 176px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
                url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

                background: rgba(0, 0, 0, .7);
                display: none;
                border-radius: 12px;
            }

            .blackBoxPauseContent {
                font: 14.4px '微软雅黑 Light';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12px;
                display: block;
                text-align: center;
                width: 90%;
                padding: 8px 0;
                margin: auto;
                color: #ffffff;
                font-weight: 200;
                border-radius: 4px;
            }

            /*播放语音时的动画*/
            @keyframes yuying{
                0%{
                    height: 0%;
                }
                20%{
                    height: 50%;
                }
                50%{
                    height: 90%;
                }
                80%{
                    height: 50%;
                }
                100%{
                    height: 0%;
                }
            }    

            .dialog-container{
                width: 60px;
                height: 25px;
                background: #efefef;
                border: 1px solid #0094de;
                border-radius: 5px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                position: absolute;top:5px;left:70px;
            }
            .dialog-container .audio-animation{
                width: 30px;
                height: 20px;
            }
            .audioPlay #one{
                animation:yuying 0.6s infinite 0.15s;
               -webkit-animation:yuying 0.6s infinite 0.15s;
            }
            .audioPlay #two{
                animation:yuying 0.6s infinite 0.3s;
               -webkit-animation:yuying 0.6s infinite 0.3s;
            }
            .audioPlay #three{
                animation:yuying 0.6s infinite 0.45s;
               -webkit-animation:yuying 0.6s infinite 0.45s;
            }
            .audioPlay #four{
                animation:yuying 0.6s infinite 0.6s;
               -webkit-animation:yuying 0.6s infinite 0.6s;
            }

            #one,#two,#three,#four{
                width:2px;
                border-radius: 50px;
                background-color: #0094de;
                vertical-align: middle;
                display: inline-block;
            }
            #one{
                margin-left: 1px;
                height: 50%;
            }
            #two{
                height: 90%;
            }
            #three{
                height: 70%;
            }
            #four{
                height: 40%;
            }
            .mui-select-content{
                border-bottom: 1px solid #c8c7cc;
            }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">表单</h1>
</header>
<div class="mui-content">
    <div class="content_item">
        <div id="scroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <form class="mui-input-group myForm">
                    <div class="mui-input-row">
                        <label>单号：</label>
                        <input type="text" minlength="4"  id="oddNumber" required placeholder="普通输入框">
                    </div>
                    <div class="mui-input-row">
                        <label>录入人：</label>
                        <input type="text" minlength="2" id="inputPeople" required placeholder="普通输入框">
                    </div>
                    <div class="" style="height:40px;padding: 10px 15px;">
                        <label>故障描述：</label>
                        <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                    </div>
                    <div class="" style="height:40px;padding: 10px 15px;">
                        <label>故障描述1：</label>
                        <textarea class="textarea" id="repairContent12" rows="5" placeholder="故障描述"></textarea>
                    </div>
                    <div class="clear"></div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>单选</label>
                        <input name="radio1" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>单选</label>
                        <input name="radio1" type="radio" checked="">
                    </div>
                    <div class="mui-input-row mui-radio mui-left mui-disabled">
                        <label>单选</label>
                        <input name="radio1" type="radio" disabled="disabled">
                    </div>

                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>复选框</label>
                        <input name="checkbox" value="Item 1" type="checkbox">
                    </div>
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>复选框</label>
                        <input name="checkbox" value="Item 2" type="checkbox" checked="">
                    </div>
                    <div class="mui-input-row mui-checkbox mui-left mui-disabled">
                        <label>复选框</label>
                        <input name="checkbox" type="checkbox" disabled="disabled">
                    </div>
                    <!-- 语音录取和播放 -->
                    <div class="mui-input-row">
                        <label>语音报修:</label>
                        <input type="text" id="voice_long" class="mui-input-clear mui-input" placeholder="语音输入" >
                        <input type="hidden" id="voice_path" >
                        <span class="mui-icon mui-icon-speech" id='microphone' style="margin-left:15%;"></span>
                        <div class="dialog-container" id='voice' style="display:none;margin-left:15%;">
                            <div class="audio-animation">
                                <div id="one"></div>
                                <div id="two"></div>
                                <div id="three"></div>
                                <div id="four"></div>
                            </div>
                        </div>

                    </div>
                    <!-- 中间黑框 录音状态-->
                    <div class="blackBoxSpeak">
                        <p class="blackBoxSpeakConent">手指上划，取消</p>
                    </div>

                    <!-- 中间黑框 暂停状态-->
                    <div class="blackBoxPause">
                        <p class="blackBoxPauseContent" style="background: red">松开手指， 取消</p>
                    </div>
                    <!--下拉框-->
                    <div class="mui-select-content">
                        <div class="mui-select mui-input-row">
                            <label>备件名称；</label>
                            <select class="mui-h5 add_sparepart" style="margin:auto; color:#000;">
                                <option value="">--请选择备件仓库--</option>
                                <option value="1">成都仓库</option>
                                <option value="1">维修件库</option>
                            </select>
                        </div>
                    </div>
                    <div class="clear"></div>
                     <div class="mui-input-row">
                        <label>图片上传：</label>
                         <button id='photo' type="button" class="mui-btn mui-btn-block">上传照片</button>
                         <!--<img class='picture' src='' data-preview-src="../img/no_img.jpg" data-preview-group="1" />-->
                    </div>
                    <div>
                        <ul id="avatar">

                        </ul>
                    </div>
                    <!--手写签名-->
                    <div class="mui-input-row mui-checkbox mui-left mui-disabled">
                        <label>手写签名</label>
                        <input name="checkbox" type="checkbox" disabled="disabled">
                    </div>

                    </form>
            </div>
        </div>
    </div>
</div>

<script>

    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../index.html";
    })
     mui.previewImage();//预览图片
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        })(mui);
    $(document).ready(function() {

        $(".myForm").validate();
        //上传照片
        var photo=document.getElementById("photo");
        photo.onclick=function(){
            showAction();
        };

        //播放录音
        var voice=document.getElementById("voice");
        voice.onclick=function(){
            var path=document.getElementById("voice_path").value;
             openPlayer(path);
        };
    })

    initRecordEvent();  

</script>

</body>

</html>
